{% extends "layout.html" %}
{% block head %}
<link rel="stylesheet" href="styles/uPlot.min.css">

<style>
    body {
        max-width: 1100px;
        margin: 2% auto;
    }

    #app {
        margin: 0 2%;
    }

    ul li {
        margin: 0;
    }

    ul li input {
        vertical-align: middle;
        margin: 0 2px;
    }

    .section {
        display: flex;
        margin: 10px 0;
    }

    .section-heading {
        font-size: 16px;
    }

    .collapsible-section {
        border: 1px black;
        border-style: dotted;
        margin: 12px 0px;
        border-radius: 10px;
    }

    input {
        border-radius: 5px;
        font-size: 12px;
        height: 100%;
    }

    input[type="checkbox"] {
        height: auto;
    }

    .category-title {
        font-weight: bold;
        font-size: 1.2em;
        margin: 10px;
        text-align: center;
    }

    .positive {
        color: red;
    }

    .slightly-positive {
        color: #ea7272;
    }

    .negative {
        color: green;
    }

    .slightly-negative {
        color: #74b374
    }
</style>

<link rel="stylesheet" type="text/css" href="scripts/compare.css">
{% endblock %}
{% block content %}
{% raw %}
<div id="app"></div>
{% endraw %}
{% endblock %}
{% block script %}
<script src="scripts/compare.js"></script>
{% endblock %}
